<template>
  <div class="shop-appraise-main-list-item">
    <div class="left">
      <img :src="leftImgUrl" alt="" />
    </div>
    <div class="center">
      <p class="username">{{ item.username }}</p>
      <div class="desc">
        <span v-for="(i, index) in item.rating_star" class="start"></span>
        <span v-if="item.time_spent_desc" class="text">{{
          item.time_spent_desc
        }}</span>
      </div>
      <div class="imgs">
        <img :src="i" alt="" v-for="(i, index) in centerImgUrl" v-if="i" />
      </div>
      <div class="tags">
        <span v-for="(i, index) in item.item_ratings" :key="index">
          {{ i.food_name }}
        </span>
      </div>
    </div>
    <div class="right">
      {{ item.rated_at }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftImgUrl: "",
      centerImgUrl: [],
    };
  },
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  created() {
    const ratings = this.item.item_ratings;
    this.leftImgUrl = this.handleImgUrl(this.item.avatar, 0);
    if (ratings) {
      for (const key in ratings) {
        this.centerImgUrl.push(this.handleImgUrl(ratings[key].image_hash, 1));
      }
    }
  },
  filters: {},
  methods: {
    // 解决图片路径问题
    handleImgUrl(receive, num) {
      let revert = num === 0 ? "" : [];
      if (receive) {
        const params1 = receive.substring(0, 1);
        const params2 = receive.substring(1, 3);
        const params3 = receive.substring(3);
        let url = `https://fuss10.elemecdn.com/${params1}/${params2}/${params3}`;
        revert instanceof Array
          ? revert.push(`${url}.jpeg`)
          : (revert = receive.includes("jpeg") ? `${url}.jpeg` : url);
        return revert;
      } else {
        return !num ? (revert = "http://elm.cangdu.org/img/default.jpg") : "";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.shop-appraise-main-list-item {
  display: flex;
  align-items: top;
  padding: 25px 0;
  margin: 0 10px;
  border-top: 1px solid #f1f1f1;
  font-size: 12px;
  .left {
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }
  .center {
    flex: 1;
    margin: 0 20px;
    .username,.desc,
    .imgs {
      margin-bottom: 10px;
    }
    .desc {
      .start {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url("~assets/img/msite/start.png");
        background-size: 100%;
      }
      .text {
        margin-left: 10px;
      }
    }
    .imgs {
      img {
        width: 65px;
        height: 65px;
        margin-right: 10px;
      }
    }
    .tags {
      span {
        display: inline-block;
        width: 50px;
        padding: 5px 3px;
        border: 1px solid #eeeeee;
        margin-right: 10px;
        color: #9d9d9d;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .right {
    font-size: 8px;
    color: #b8b8b8;
  }
}
</style>